<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="药品类别" prop="drugClassId">
				<el-select v-model="queryParams.drugClassId" placeholder="请输入药品类名" clearable @keyup.enter.native="handleQuery">
					<el-option v-for="item in classOptions" :key="item.drugClassId" :label="item.drugClassName" :value="item.drugClassId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="药品名称" prop="drugdetailedinfoName">
				<el-input v-model="queryParams.drugdetailedinfoName" placeholder="请输入药品名称" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['drugInfo:drugDetailedInfo:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['drugInfo:drugDetailedInfo:edit']">
					修改
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['drugInfo:drugDetailedInfo:remove']">
					删除
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['drugInfo:drugDetailedInfo:export']">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="drugdetailedinfoList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="药品编号" align="center" prop="drugdetailedinfoId" />
			<el-table-column label="药品编码" align="center" prop="drugdetailedinfoCode" />
			<el-table-column label="药品名称" align="center" prop="drugdetailedinfoName" />
			<el-table-column label="药品类别" align="center" key="drugClassName" prop="sysDrugClass.drugClassName" />
			<el-table-column label="单价" align="center" prop="price" />
			<el-table-column label="药品品牌" align="center" key="brandId" prop="sysDrugBrand.brandId" />
			<el-table-column label="保质期(月)" align="center" prop="qgperiod" />
			<el-table-column label="创建时间" align="center" prop="createTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['drugInfo:drugDetailedInfo:edit']"
						<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['drugInfo:drugDetailedInfo:remove']"
					>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改药品详细信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="药品名称" prop="drugdetailedinfoName"><el-input v-model="form.drugdetailedinfoName" placeholder="请输入药品名称" /></el-form-item>
				<el-form-item label="药品编码" prop="drugdetailedinfoCode"><el-input v-model="form.drugdetailedinfoCode" placeholder="请输入编码" /></el-form-item>
				<el-form-item label="药品类别" prop="drugClassId">
					<el-select v-model="form.drugClassId" placeholder="请输入药品类名" clearable>
						<el-option v-for="item in classOptions" :key="item.drugClassId" :label="item.drugClassName" :value="item.drugClassId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="单价" prop="price"><el-input v-model="form.price" placeholder="请输入单价" /></el-form-item>
<!-- 				<el-form-item label="数量" prop="quantity"><el-input v-model="form.quantity" placeholder="请输入数量" /></el-form-item> -->
				<el-form-item label="药品品牌" prop="brandId">
				<el-select v-model="form.brandId" placeholder="请输入药品品牌" clearable @keyup.enter.native="handleQuery">
					<el-option v-for="item in brandOptions" :key="item.brandId" :label="item.brandName" :value="item.brandId"></el-option>
				</el-select>
				</el-form-item>
				<el-form-item label="保质期(月)" prop="qgperiod"><el-input v-model="form.qgperiod" placeholder="请输入保质期(月)" /></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listDrugDetailedInfo, getDrugDetailedInfo, getClass, delDrugDetailedInfo, addDrugDetailedInfo, updateDrugDetailedInfo } from '@/api/drugInfo/drugDetailedInfo';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
export default {
	name: 'DrugDetailedInfo',
	dicts: ['sys_normal_disable'],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 药品详细信息表格数据
			drugdetailedinfoList: [],
			//药品类别选项
			classOptions: [],
			//品牌选项
			brandOptions: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				drugClassId: undefined,
				drugdetailedinfoName: undefined
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				drugdetailedinfoName: [{ required: true, message: '药品名称不能为空', trigger: 'blur' }],
				drugClassId: [{ required: true, message: '分类名不能为空', trigger: 'blur' }],
				drugdetailedinfoCode: [{ required: true, message: '药品编码不能为空', trigger: 'blur' },{ pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: 'change' }],
				brandId: [{ required: true, message: '品牌名不能为空', trigger: 'blur' }],
				qgperiod: [{ required: true, message: '保质期不能为空', trigger: 'blur' },{ pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: 'change' }]
				
			}
		};
	},
	mounted() {
		this.getLed();
	},
	created() {
		this.getList();
	},
	methods: {
		getLed() {
			this.reset();
			getClass().then(response => {
				this.classOptions = response.classes;
				this.brandOptions = response.brands;
			});
		},
		/** 查询药品详细信息列表 */
		getList() {
			this.loading = true;
			listDrugDetailedInfo(this.queryParams).then(response => {
				this.drugdetailedinfoList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				drugdetailedinfoId: undefined,
				drugClassName: undefined,
				drugdetailedinfoName: undefined,
				drugdetailedinfoCode: undefined,
				price: undefined,
				quantity: undefined,
				brand: undefined,
				qgperiod: undefined
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.drugdetailedinfoId);
			this.single = selection.length != 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加药品信息';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const drugdetailedinfoId = row.drugdetailedinfoId || this.ids;
			getDrugDetailedInfo(drugdetailedinfoId).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = '修改药品信息';
			});
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					if (this.form.drugdetailedinfoId != undefined) {
						updateDrugDetailedInfo(this.form).then(response => {
							this.$modal.msgSuccess('修改成功');
							this.open = false;
							this.getList();
						});
					} else {
						addDrugDetailedInfo(this.form).then(response => {
							this.$modal.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const drugdetailedinfoIds = row.drugdetailedinfoId || this.ids;
			this.$modal
				.confirm('是否确认删除药品编号为"' + drugdetailedinfoIds + '"的数据项？')
				.then(function() {
					return delDrugDetailedInfo(drugdetailedinfoIds);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'/drugInfo/drugDetailedInfo/export',
				{
					...this.queryParams
				},
				`drugdetailedinfo_${new Date().getTime()}.xlsx`
			);
		}
	}
};
</script>
